<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  
<div id="app">

  <!-- 1. lazy 修饰符：懒惰, 在input失去焦点或回车时进行实时更新 -->
  <input type="text" v-model.lazy="message">
  <h2>你的输入为: {{message}}</h2>

  <!-- 2. number 修饰符 v-model绑定时自动赋为string类型, 加上number修饰符后默认赋值为number数字类型 -->
  <input type="number" v-model.number="age">
  <h2>{{age}} -  {{typeof age}}</h2>
  
  <!-- 3. trim 去除头尾多余空格 -->
  <input type="text" v-model.trim="name">
  <h2>你的输入为: {{name}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data:
    {
      message: 'Hello World',
      age: '',
      name: 'chen',
    },
  })  
</script>

</body>
</html>